<template>
  <div class="refund-page">
    <c-title :hide="false" text="申请退款"></c-title>
    <goods-card :goodsItem="orderDetails">
      <div class="flex-a-c attribute" slot="shoplabel">
        <div class="num">商品金额￥{{ orderDetails.price }}</div>
      </div>
    </goods-card>
    <div class="mb20"></div>
    <div class="refund-specifications">
      <van-cell is-link :value="refundValue ? refundValue : '请至少选择一项'" :border="false" value-class="goods-discounts" @click="onCause">
        <div slot="title" class="flex-a-c">
          <div class="van-cell-text">退款原因</div>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/required.png" class="required" />
        </div>
      </van-cell>
      <!-- <div class="num flex-j-sb">
      <div>退款份数</div>
      <div>
        <van-stepper value="{{ refundSum }}" bind:change="onTotalChange"  min="1" max="{{refundSum}}"/>
      </div>
    </div> -->
      <div class="num flex-j-sb num-mt">
        <div class="num-title">退款金额<span class="notes">（平台优惠金额不可退款）</span></div>
        <div class="price">
          <span class="symbol">￥</span>
          <span>{{ orderDetails.payment_amount }}</span>
        </div>
      </div>
      <div class="num flex-j-sb num-mt mode-pb">
        <div class="num-title">退款方式</div>
        <div class="num-value">原路退回</div>
      </div>
    </div>

    <div class="mb20"></div>
    <div>
      <van-cell-group>
        <van-field label="退款说明" v-model="explain" type="textarea" placeholder="请输入退款说明" autosize :border="false" />
      </van-cell-group>
    </div>
    <div class="mb20"></div>

    <div class="refund-footer">
      <div class="explain">申请退款后不可取消，钱款预期1-3个自然日到账</div>
      <div class="refund-btn" @click="onRefund">提交</div>
    </div>
    <van-dialog id="van-dialog" />

    <van-popup v-model="refundShow" @close="onClose" position="bottom" closeable round>
      <div class="refund-main">
        <div class="refund-title">退款原因</div>
        <van-radio-group v-model="refundRadio" @change="onrefundChange">
          <block v-for="(item, index) in reasons" :key="index">
            <div class="flex-j-sb cause-mb">
              <div class="cause-text">{{ item }}</div>
              <van-radio :name="item" shape="square" checked-color="#ff3a00"></van-radio>
            </div>
          </block>
        </van-radio-group>
        <div class="mb30"></div>
        <div class="refund-cause-btn" @click.stop="refundBtn">提交</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import refundOrder_controller from "./refundOrder_controller.js";
export default refundOrder_controller;
</script>
<style lang="scss" scoped>
.refund-page {
  margin: 0.625rem 0.625rem 0.625rem;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}

.mb30 {
  height: 0.9375rem;
  clear: both;
}

.attribute {
  margin: 0.375rem 0 0 0;
  font-size: 0.7163rem;
  color: #979797;
}

.refund-specifications {
  background-color: #fff;
  border-radius: 0.3125rem;
}

.goods-discounts {
  font-size: 0.75rem;
  color: #8e8d92;
}

.required {
  width: 0.4375rem;
  height: 0.5rem;
  margin-left: 0.4063rem;
}

.refund-specifications {
  .num {
    align-items: center;
    padding: 0 1rem 0 1rem;
    font-size: 0.875rem;
    color: #222;
  }

  .num-mt {
    margin-top: 0.9375rem;
  }
}

.num-title {
  font-size: 0.875rem;
  color: #222;
}

.num-mt .notes {
  font-size: 0.75rem;
  color: #686868;
}

.num {
  .price {
    font-size: 1rem;
    color: #ff3a00;

    .symbol {
      font-size: 0.6875rem;
      color: #ff3a00;
    }
  }

  .num-value {
    font-size: 0.75rem;
    color: #343434;
  }
}

.refund-specifications .mode-pb {
  padding: 0 1rem 1rem 1rem;
}

.refund-footer {
  position: fixed;
  bottom: 1rem;

  .explain {
    font-size: 0.75rem;
    color: #555;
    margin: 0 0 0.8438rem 0.125rem;
  }

  .refund-btn {
    width: 21.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.9375rem;
    color: #fff;
    border-radius: 0.3125rem;
  }
}

/* 退款原因 */

.refund-main {
  padding: 1.1563rem 1rem 1.2188rem 1.0625rem;

  .refund-title {
    font-size: 1rem;
    color: #222;
    text-align: center;
    margin-bottom: 2.1875rem;
  }

  .cause-mb {
    margin-bottom: 1.25rem;
  }

  .cause-text {
    font-size: 0.875rem;
    color: #222;
  }
}

.refund-cause-btn {
  width: 21.875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  margin-top: 0.9375rem;
  text-align: center;
  background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
  font-size: 0.9375rem;
  color: #fff;
  border-radius: 0.3125rem;
  cursor: pointer;
}
</style>
